<template>
	<view class="content flexc">
		<view class="card flexc align-center">
			<!-- <image class="user" src="@/static/applogo.png"></image>
			<text class="name text-color1">只记今朝笑</text> -->
			<text class="money">¥ 30.00</text>
			<w-barcode class="barcode" :options="baroptions" @generate="generateBarCode"></w-barcode>
			<image class="barcode-img" :src="barCodeImg"></image>
			<view class="barcode-text text-color5">
				hls99 **** **** **** **** 查看数字
			</view>
			<w-qrcode class="qrcode" :options="qroptions" @generate="generateQrCode"></w-qrcode>
			<image class="qrcode-img" :src="qrCodeImg"></image>
			<view class="qrcode-desc text-color5 flexr align-center">
				<image class="refresh" src="@/static/refresh.png"></image>
				会员码每30秒自动更新，请在店内消费时使用
			</view>
			<view class="divider"></view>
			<view class="infos flexc">
				<view class="invites">
					<view class="invites-friend flexr justify-spacebwt" v-for="(item, index) in 3" :key="index">
						<text class="text-color1">
							好友<text class="text-color-primary">@君安</text>助力1.00元
						</text>
						<text class="text-color1">
							2023/12/10 23:59
						</text>
					</view>
					<view class="invites-hint">
						快点击下方按钮邀请朋友来助力吧
					</view>
				</view>
				<view class="infos-item">
					基础优惠: ¥30.00
				</view>
				<view class="infos-item">
					最高优惠: ¥30.00
				</view>
				<view class="infos-item">
					最低助力人数: 0
				</view>
				<view class="infos-item">
					可使用门店: 合力思HOLYES
				</view>
				<view class="infos-item">
					有效期至: 2023/12/10 23:59
				</view>
				<view class="infos-item">
					使用规则: 
				</view>
				<view class="rule-item">
					1.流程:顾客菜单→优惠券→优惠券详情→出示优惠券码→店员扫码，支付成功，自动减去优惠
				</view>
				<view class="rule-item">
					2.限制:每次支付仅限使用1张优惠券，领券之后直接线上/线下购买商品时选择付款即可
				</view>
				<view class="rule-item">
					3.其他:本券只限购买对应商品时作抵扣金额用，不设找零或兑换现金
				</view>
				<view class="rule-item">
					4.优惠券仅限在会员注册平台核销
				</view>
				<view class="rule-item">
					5.优惠券一经使用，无论是否发生退换货，原则上均不予以退还。
				</view>
				<view class="rule-item">
					6.优惠券最终解释权归商家所有
				</view>
			</view>
			<!-- <view class="flex-1"></view>
			<view class="datas flex-1 flexr align-center justify-spacebwt">
				<view class="flexc align-center flex-1">
					<view class="number">260</view>
					<view class="label">余额</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">386</view>
					<view class="label">积分</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">5</view>
					<view class="label">优惠券</view>
				</view>
				<view class="flexc align-center flex-1">
					<view class="number">3</view>
					<view class="label">消费次卡</view>
				</view>
			</view> -->
		</view>
		<view class="flexr align-center justify-center">
			<image class="invite-icon" src="@/static/invite.png"></image>
			<text class="invite-text">
				邀请好友助力放大优惠券
			</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app"
const qrCodeImg = ref();
const barCodeImg = ref();
onLoad((options) => {
	uni.setNavigationBarTitle({
		title: options.title
	})
})
const baroptions = ref({
	width: 650,
	height: 112,
	code: 'E57890543271985',
})
const qroptions = ref({
	code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0',// 生成二维码的值
	size: 390,
})
function generateQrCode(e) {
	console.log('generateQrCode', e);
	qrCodeImg.value = e.img.tempFilePath;
}
function generateBarCode(e) {
	barCodeImg.value = e.img.tempFilePath;
}
</script>

<style lang="scss">
.content {
	background-color: #156557;
	overflow-y: scroll;
	flex: 1;
	.card {
		background-color: white;
		// height: 1050rpx;
		// min-height: 1050rpx;
		margin: 32rpx;
		border-radius: 32rpx;
		// .user {
		// 	box-sizing: border-box;
		// 	width: 150rpx;
		// 	height: 150rpx;
		// 	border: 4rpx solid white;
		// 	border-radius: 75rpx;
		// 	margin-top: -75rpx;
		// }
		// .name {
		// 	margin-top: 10rpx;
		// }
		.money {
			font-size: 48rpx;
			color: $primary-color;
			margin-top: 40rpx;
		}
		.barcode {
			margin-top: 33rpx;
			position: absolute;
			left: 10000rpx;
		}
		.barcode-img {
			margin-top: 33rpx;
			width: 650rpx;
			height: 112rpx;
		}
		.barcode-text {
			font-size: 22rpx;
			margin-top: 20rpx;
		}
		.qrcode {
			margin-top: 60rpx;
			width: 390rpx;
			height: 390rpx;
			position: absolute;
			left: 10000rpx;
		}
		.qrcode-img {
			margin: 56rpx;
			width: 390rpx;
			height: 390rpx;
		}
		.qrcode-desc {
			font-size: 22rpx;
			margin-top: 20rpx;
			.refresh {
				width: 40rpx;
				height: 45rpx;
				padding: 10rpx;
				box-sizing: border-box;
				margin-right: 10rpx;
			}
		}
		// .datas {
		// 	height: 187rpx;
		// 	min-height: 187rpx;
		// 	align-self: stretch;
		// 	// background-color: red;
		// 	border-top: 2rpx dashed $divider-color;
		// 	padding: 0 48rpx;
		// 	.number {
		// 		font-size: 48rpx;
		// 		color: #36BBA5;
		// 	}
		// 	.label {
		// 		margin-top: 15rpx;
		// 		color: $text-color2;
		// 		font-size: 28rpx;
		// 	}
		// }
		.divider {
			height: 1px;
			border-top: 1px dashed $divider-color !important;
			background-color: transparent;
			align-self: stretch;
			margin-top: 40rpx;
		}
		.infos {
			padding: 34rpx 48rpx;
			align-self: stretch;
			.invites {
				align-self: stretch;
				border: 2rpx solid $primary-color;
				margin-bottom: 38rpx;
				.invites-hint {
					color: $text-color5;
					font-size: 24rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}
				.invites-friend {
					font-size: 24rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 48rpx;
				}
			}
			.infos-item {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color: $text-color5;
			}
			.rule-item {
				font-size: 20rpx;
				color: $text-color5;
				line-height: 30rpx;
			}
		}
	}
	.invite-text {
		font-size: 32rpx;
		color: white;
	}
	.invite-icon {
		width: 42rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}
}
</style>
